<!--
    Va-Cascader 《数据字典的联级框》

    使用方式：
        <va-cascader
                    :remoteLoading="loadChoosableMenu"
                    label="name"
                    value="id"
                    v-model="menuObj"
                    @change="selectParent"
            />

    1.dictKey:数据字典的唯一标识
    2.v-model 数据的双向绑定,绑定父组件中的字段
    3.disabled 是否禁用

-->
<template>
    <va-load :dictKey="dictKey"
             :remoteLoading="remoteLoading"
             v-model="modelValue2"
    >
        <template #default="{  options }">
            <el-cascader ref="demoCascader"
                         v-model="option"
                         :clearable="clearable"
                         :options="options"
                         :show-all-levels="false"
                         :filterable="filterable"
                         :size="size"
                         :placeholder="placeholder"
                         :props="cascaderProps"
                         :disabled="disabled"
                         @change="vaChange"

            >
                <template #default="{  data }">
                    <span><i :class="data['icon']"></i></span>
                    <span>{{ data[label] }}</span>
                </template>
            </el-cascader>
        </template>
    </va-load>
</template>

<script>
    import {ref, watch,getCurrentInstance, defineComponent} from 'vue'
    import {commonProp, eventFun} from "./common"

    export default defineComponent({
        name: "Va-Cascader",
        emits: ['change'],
        props: {
            ...commonProp,
            placeholder: {
                type: String,
                default: '请选择数据选项'
            },
            multipleLimit: {
                type: Number,
                default: 0
            },
            label: {
                type: String,
                default: "label"
            },
            value: {
                type: String,
                default: "value"
            },

        },

        setup(props, context) {
            const {proxy} = getCurrentInstance()

            //data
            //选项值
            const option = ref('')

            //选项值
            const modelValue2 = ref(props.modelValue)

            //watch
            watch(() => props.modelValue, (val) => {
                modelValue2.value=val
            })

            const cascaderProps = ref({
                checkStrictly: true,
                value: 'id',
                label: props.label,
                children: 'childMenu'
            })

            //EVENT
            function vaChange(value) {

                const obj = proxy.$refs['demoCascader'].getCheckedNodes()
                context.emit("update:modelValue", value)
                context.emit("change", obj[0].data)
            }


            return {
                //data
                option,
                modelValue2,
                cascaderProps,
                //event
                vaChange,
                //fun
                ...eventFun(props, context)
            }
        }
    })
</script>

<style scoped>

</style>